/**
 * Created by yzdd on 2018/6/3.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity
} from 'react-native';
import {width} from '../../utils/publiscStyle';
import {observer} from 'mobx-react';
import {observable} from 'mobx';

const styles = StyleSheet.create({
  modalContainer: {
    backgroundColor: "rgba(0,0,0,0.5)",
    flex: 1,
    justifyContent: "flex-end"
  },
  modalView: {
    width,

  },
  headerModalView: {
    width,
    height: 48,
    flexDirection: "row",
    backgroundColor: "#EEEEEE"
  },
  modalTitleView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: "center"
  },
  leftTitleView: {
    width: 58,
    height: 48,
    alignItems: 'center',
    justifyContent: "center"
  },
  font17: {
    fontSize: 14,
    color: "#1AAD19"
  },
  font18: {
    fontSize: 16,
    color: "#000000"
  },
  contentView: {
    width,
    paddingLeft: 15,
    paddingRight: 15,
    backgroundColor: "#FFFFFF"
  },
  selectItem: {
    width: width - 30,
    height: 47,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderBottomColor: "#EEEEEE"
  },
  circleItem: {
    width: 18,
    height: 18,
    borderRadius: 18,
    backgroundColor: "#CCCCCC",
    alignItems: "center",
    justifyContent: "center"
  },
  icon7: {
    width: 10,
    height: 10
  },
  middleView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  font19: {
    fontSize: 16,
    color: "#333333"
  },
  selectCircleItem: {
    width: 18,
    height: 18,
    borderRadius: 18,
    backgroundColor: "#1AAD19",
    alignItems: "center",
    justifyContent: "center"
  },
});

const duigouIcon = require('../../assets/duigou.png');
let data = ["1", "2", "3"];
@observer
export default class SelectUnitModal extends Component {

  @observable
  selectIndex = -1;

  selectUnit = (i) => {
    this.selectIndex = i;
  }
  toBack = () => {
    const {goBack} = this.props.navigation;
    goBack(null);
  }
  toSub = () => {
    const {goBack} = this.props.navigation;
    let {store, name} = this.props.navigation.state.params;
    if (this.selectIndex === -1) {
      store[name] = "";
    } else {
      store[name] = data[this.selectIndex];
    }
    goBack(null);
  }

  render() {
    return (
      <View style={styles.modalContainer}>
        <View style={styles.modalView}>
          <View style={styles.headerModalView}>
            <TouchableOpacity style={styles.leftTitleView} onPress={this.toBack}>
              <Text style={styles.font17}>取消</Text>
            </TouchableOpacity>
            <View style={styles.middleView}>
              <Text style={styles.font18}>选择经营单元</Text>
            </View>
            <TouchableOpacity style={styles.leftTitleView} onPress={this.toSub}>
              <Text style={styles.font17}>确定</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.contentView}>
            {
              data.map((v, i) => {
                return (
                  <TouchableOpacity style={styles.selectItem} key={i} onPress={() => this.selectUnit(i)}>
                    <Text style={styles.font19}>{v}</Text>
                    <View style={[i === this.selectIndex ? styles.selectCircleItem : styles.circleItem]}>
                      <Image
                        source={duigouIcon}
                        resizeMode={"contain"}
                        style={styles.icon7}
                      />
                    </View>
                  </TouchableOpacity>
                )
              })
            }
          </View>
        </View>
      </View>
    );
  }
}